<html>
    <head>
        {% load static %}
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'message/css/style.css' %}">
        <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
        <script src="{% static 'js/bootstrap.min.js' %}"></script>
        <script src="{% static 'message/js/style.js' %}"></script>
        <title>Blog</title>
        <script src="{% static '/ckeditor/ckeditor/ckeditor.js' %}"></script>
        <script src="{% static '/ckeditor/ckeditor-init.js' %}"></script>
    </head>
    
    <body>
        <nav class="navbar navbar-expand-sm navbar-dark" style="background-color: rgba(0, 60,123,0.8);">
            <!-- Brand -->
            <a class="navbar-brand" href="{% url 'home:index' %}">Campus Survival Guide</a>
            <!-- Links -->
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Blog</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'blog:index' %}">List</a>
                        <a class="dropdown-item" href="{% url 'blog:edit' %}">Create</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'message:index' 'generalActivity' %}">Activity</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'message:index' 'generalLearn' %}">Learn</a>
                </li>
          
                <!-- Dropdown -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">architecture</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'message:index' 'library' %}">library</a>
                        <a class="dropdown-item" href="{% url 'message:index' 'teaching' %}">Teaching</a>
                        <a class="dropdown-item" href="{% url 'message:index' 'canteen' %}">canteen</a>
                        <a class="dropdown-item" href="{% url 'message:index' 'logistics' %}">Logistics</a>
                    </div>
                </li>
            </ul>
            <span class="user">
                {{ name }}
                <a href="{% url 'message:cancel' %}" class="small">Logout</a>
            </span>
        </nav>

        <div class="container" style="margin-top: 10px;">
            <form method="POST" action="add">
                <div class="form-group row col-md-8 offset-md-2">
                    {% csrf_token %}
                    <label>Sort</label>
                    <select id="sort" class="form-control">
                        <option value="python">python</option>
                        <option value="java">java</option>
                        <option value="c/c++">c/c++</option>
                        <option value="js">js</option>
                        <option value="mysql/php">mysql/php</option>
                        <option value="others">others</option>
                    </select>
                    <label>Title</label>
                    <input type="text" id="title" name="title" placeholder="TITLE" class="form-control"/>
                    <label>Author</label>
                    <input type="text" id="author" name="author" placeholder="AUTHOR" class="form-control"/>
                    <label>Introduction</label>
                    <textarea type="text" id="introduction" name="introduction" placeholder="INTRODUCTION" class="form-control"></textarea>
                    <label>Content</label>

                    <textarea cols="80" id="Text" name="Text" rows="20"></textarea>
                    <script>
                        //CKEDITOR.replace( 'editor1' , {uiColor: '#9AB8F3'});
                        var content = CKEDITOR.replace('Text')
                        $(function(){
                            $("#sub").click(function(){
                                console.log("click ok")
                                var a = content.getData()
                                let title = $("#title").val()
                                let author = $("#author").val()
                                let introduction = $("#introduction").val()
                                let sort = $("#sort").val()
                                //console.log("get data:")
                                //console.log(title+"  "+author+"  "+introduction+"  "+sort)
                                console.log("a??????=="+a)
                                $.ajax({
                                    url:'{% url 'blog:add' %}',
                                    type:"POST",
                                    data:{
                                        csrfmiddlewaretoken:'{{ csrf_token }}',
                                        //a:content.getData()
                                        a:a,
                                        title:title,
                                        author:author,
                                        introduction:introduction,
                                        sort:sort
                                    },
                                    dataType:'json',
                                    success:function(data){
                                        console.log("success?")
                                        //$('#id').val(content.getData())
                                        $("#js_after").empty()
                                        //data.forEach(insert)
                                        window.location.href="{% url 'blog:index' %}"
                                    },
                                    error:function (XMLHttpRequest, textStatus, errorThrown) {
                                        console.log(XMLHttpRequest.status)
                                        console.log(XMLHttpRequest.readyState)
                                        console.log(textStatus)
                                    }
                                })
                            })
                        })
                    </script>

                    <div class="row offset-md-4" style="margin-top: 10px">
                        <button type="button" class="btn btn-primary" style="margin-right: 10px;" id="sub">Submit</button>
                        <button type="reset" class="btn btn-primary">Reset</button>
                    </div>
                </div>
            </form>
        </div>
    </body>
    <div>
        <p class="text-center" style="position: relative;top:10px;font-size:12px;color:rgba(213,212,215, 0.8)">—— ©copyright Lingxi Kuang and Yifei Zhu All Rights Reserved. ——</p>
    </div>
</html>